<template>
    <div>
        <mu-container>
            <mu-expansion-panel :expand="panel === 'panel1'" @change="toggle('panel1')">
                <div slot="header">Panel 1</div>
                1
            </mu-expansion-panel>
            <mu-expansion-panel :expand="panel === 'panel2'" @change="toggle('panel2')">
                <div slot="header">Panel 2</div>
                2
            </mu-expansion-panel>
            <mu-expansion-panel :expand="panel === 'panel3'" @change="toggle('panel3')">
                <div slot="header">Panel 3</div>
                3
            </mu-expansion-panel>
        </mu-container>
    </div>
</template>

<script>
    export default {
        name: "slots",
        data () {
            return{
                panel: '',
            }
        },
        mounted () {

        },
        created () {

        },

        methods:{
            toggle (panel) {
                this.panel = panel === this.panel ? '' : panel;
            }
        }
    }
</script>

<style scoped lang="scss">
    .slot{

    }
</style>
